<template>
  <div class="friends">
    <div class="subnav"></div>
    <div class="g-bd">
      <div class="n-pglg2">
        <div class="welc">你可以关注明星和好友品味他们的私房歌单<br>通过他们的动态发现更多精彩音乐</div>
        <a
          hidefocus="true"
          href="#"
          onclick="top.login();return false;"
          class="btn"
        >立即登录</a>
      </div>
    </div>
    <div
      class="HuaGuo"
      @click="Dlu"
    >

    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created() {},
  methods: {
    Dlu(){
      let phoneLogin=document.querySelector(".phoneLogin")
      let dengLu=document.querySelector(".dengLu")
      let dengluTao=document.querySelector(".dengluTao")
      let ZDL=document.querySelector(".ZDL")
      dengLu.style.display="block"
      // dengluTao.style.display="block"
      // phoneLogin.style.display="none"
      ZDL.style.display="none"
    }
  },
};
</script>
<style lang="less">
.friends{
  .subnav{
      position: relative;
      height: 5px;
      border-bottom: none;
      z-index: 90;
      height: 5px;
      box-sizing: border-box;
      background-color: #C20C0C;
      position: relative;
      zoom: 1;

    }
  .g-bd{
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;
      .n-pglg2{
        width: 902px;
    height: 340px;
    margin: 0 auto 0;
    padding-top: 70px;
    background: url('../../assets/cyzimgs/friends.jpg');
    background-position: 0 9px;
      .welc{
        padding: 118px 2px 0 534px;
          line-height: 23px;
          color: #666;
          font-size: 14px;
      }
      a{
        display: block;
        width: 157px;
        height: 48px;
        margin: 36px 0 0 535px;
        // background: url('../../assets/cyzimgs/DLwangyiyun.png');
        background-position: 0 62px;
        text-indent: -9999px;
        cursor: pointer;
      }
      }
  }
  .HuaGuo{
    display: block;
    cursor: pointer;
    width: 157px;
    height: 46px;
    position: absolute;
    top: 344px;
    left: 835px;
    z-index: 10000;
    background: blue;
    border-radius: 7px;
    background: url('../../assets/cyzimgs/friends.jpg') no-repeat 0 9999px;
    }
    .HuaGuo:hover{
    background-position: 0px -430px;
    }
}
</style>
